<template>
  <div>
    <!-- 导航栏 -->
   <div class="navBar">
      <van-nav-bar
  title="黑马程序员.vant"
  left-text="返回"
  right-text="添加"
  left-arrow
  @click-left="Back"
  @click-right="Add"
/>
   </div>
<!-- 搜索框 -->
  <form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch(value)"
    @cancel="onCancel"
  />
</form>
<!-- 下拉列表 -->
<van-swipe-cell v-model="list" v-show="!results" v-for="item in list" :key="item.id">
      <van-cell :title="item.name" :value="item.ctime" />

      <template slot="right">
        <van-button square type="danger" text="删除" @click="removeList(item.id)" />
      </template>
    </van-swipe-cell>
<!-- 搜索历史 -->
   <van-row :gutter="20" class="history" v-show="results">
      <van-col span="22">搜索历史</van-col>
      <van-col  span="2">
        <van-icon id="delete" name="delete" @click="removeIcon" />
      </van-col>
      <!-- <van-divider>文字</van-divider> -->
    </van-row>
    <van-divider :style="{ padding: '0 16px' }" v-show="historyRecord">暂无历史记录</van-divider>
    <div class="tagList" style="padding: 5px 10px">
      <van-tag
      :key="index"
        v-for="(item, index) in historyArr"
        v-show="tagresults"
        @click="arr(item)"
      >{{item}}</van-tag>
    </div>

  </div>

</template>
<script>
export default {
  data () {
    return {
      value: '',
      active: 0,
      icon: {
        active: 'https://img.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
      },
      searchInfo: {
        id: '',
        ctime: '',
        name: ''
      },
      list: [],
      results: true,
      historyArr: [],
      tagresults: true
    }
  },

  methods: {
    async onSearch (value) {
      if (this.value.trim().length === 0) {
        return this.$toast('请输入内容')
        // console.log(123)
      }
      const { data: res } = await this.$http.get('http://www.liulongbin.top:3005/api/getprodlist',
        { params: this.queryInfo }
      )
      console.log(res)
      this.results = false
      this.list = res.message
      this.historyArr.unshift(value)
      console.log(value)
      window.localStorage.setItem('value', JSON.stringify(this.historyArr))
      this.tagresults = false
    },
    // 点击取消
    onCancel () {
      this.results = true
      this.tagresults = true
    },
    // 右划删除
    removeList (id) {
      this.$dialog
        .confirm({
          title: '警告',
          message: '是否删除该商品'
        })
        .then(async () => {
          const { data: res } = await this.$http.get(
            `http://www.liulongbin.top:3005/api/delproduct/${id}`
          )
          console.log(res)

          this.$notify('删除成功')
          this.onSearch()
        })
        .catch(() => {
          this.$notify('已取消删除')
        })
      console.log(id)
    },

    Back () {
      this.$router.go(-1)
    },
    Add () {
      this.$router.push('/add')
    },
    // 删除历史记录
    removeIcon () {
      this.historyArr = []
    },
    // 刷新购物车数量

    changeNum () {
      // 得到localstorage中的值
      let getLocal = JSON.parse(window.localStorage.getItem('car'))
      // 如果为空等于一个[],避免为空foreach错误 ,往里push就直接是[{}]了
      getLocal || (getLocal = [])
      var counts = 0
      // 得到所有count值
      getLocal.forEach(item => {
        counts += item.count
      })
      this.$store.commit('initCarNum', counts)
    },
    arr (item) {
      this.value = item
    }
  },
  created () {
    if (!window.localStorage.getItem('value')) {
      return 1
    }
    this.historyArr = JSON.parse(window.localStorage.getItem('value'))
    this.changeNum()
  },
  // 计算历史记录
  computed: {
    historyRecord () {
      if (this.historyArr.length !== 0) {
        return false
      }
      return true
    }
  }
}
</script>
<style lang="less" scoped>
.history {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 20px 10px 10px 20px;
  font-size: .416667rem;
}
#delete {
  float:right;
  margin-right: 5px;
}
.van-tag {
  margin: 0 5px;
}
.van-swipe-cell__right {
  button {
    height: 100%;
  }
}
</style>
